<template>
  <div class="box" style="overflow:hidden;">
    <OrderInformation :orderNumber="orderNumber"></OrderInformation>
    <el-row v-if="orderStatus == 0">
      <el-col :span="24">
        <span style="float:right"
          ><el-button type="primary" @click="showDia"
            >修改录入信息</el-button
          ></span
        >
      </el-col>
    </el-row>
    <div class="enterInfor">
      <table>
        <tr>
          <td rowspan="4" width="150" class="left">客户信息</td>
          <td width="150" class="title">借款人姓名</td>
          <td>{{ showForm.basicBorrowerName }}</td>
          <td width="150" class="title">身份证号码</td>
          <td>{{ showForm.basicBorrowerCard }}</td>
          <td width="150" class="title">联系电话</td>
          <td>{{ showForm.basicBorrowerPhone }}</td>
        </tr>
        <tr>
          <td width="150" class="title">现住地址</td>
          <td>{{ showForm.basicBorrowerAddress }}</td>
          <td width="150" class="title">工作单位</td>
          <td>{{ showForm.basicBorrowerWork }}</td>
          <td width="150" class="title">婚姻状况</td>
          <td>{{ showForm.basicBorrowerMarriage }}</td>
        </tr>
        <tr>
          <td width="150" class="title">借款人资质</td>
          <td>{{ Borrowing }}</td>
          <td width="150" class="title">签约类型</td>
          <td>{{ Contract }}</td>
          <td width="150" class="title">是否有涉诉</td>
          <td>{{ litigation }}</td>
        </tr>
        <tr v-if="showForm.basicBorrowerMateName">
          <td width="150" class="title">配偶姓名</td>
          <td>{{ showForm.basicBorrowerMateName }}</td>
          <td width="150" class="title">身份证号码</td>
          <td>{{ showForm.basicBorrowerMateCard }}</td>
          <td width="150" class="title">联系电话</td>
          <td>{{ showForm.basicBorrowerMatePhone }}</td>
        </tr>
        <tr v-if="showForm.basicBorrowerMateName">
          <td width="150" class="title">现住地址</td>
          <td>{{ showForm.basicBorrowerMateAddress }}</td>
          <td width="150" class="title">工作单位</td>
          <td>{{ showForm.basicBorrowerMateWork }}</td>
          <td colspan="2"></td>
        </tr>
      </table>

      <table>
        <tr>
          <td rowspan="5" width="150" class="left">不动产信息</td>
          <td width="150" class="title">抵押人姓名</td>
          <td>{{ showForm.pledgeName }}</td>
          <td width="150" class="title">身份证号码</td>
          <td>{{ showForm.pledgeCard }}</td>
          <td width="150" class="title">联系电话</td>
          <td>{{ showForm.pledgePhone }}</td>
          <td width="150" class="title"></td>
          <td></td>
        </tr>
        <tr>
          <td width="150" class="title">配偶姓名</td>
          <td>{{ showForm.pledgeMateName }}</td>
          <td width="150" class="title">身份证号码</td>
          <td>{{ showForm.pledgeMateCard }}</td>
          <td width="150" class="title">联系电话</td>
          <td>{{ showForm.pledgeMatePhone }}</td>
          <td width="150" class="title"></td>
          <td></td>
        </tr>
        <tr>
          <td width="150" class="title">抵押物地址</td>
          <td>{{ showForm.pledgeHouseAddress }}</td>
          <td width="150" class="title">所属区域</td>
          <td v-if="showForm.pledgeHouseDistrict">
            {{ showForm.pledgeHouseDistrict }}
          </td>
          <td v-else>
            {{ showForm.provinceName }}{{ showForm.cityName
            }}{{ showForm.areaName }}
          </td>
          <td width="150" class="title">小区名字</td>
          <td>{{ showForm.pledgeHouseName }}</td>
          <td width="150" class="title">房屋类型</td>
          <td>{{ showForm.pledgeHouseType }}</td>
        </tr>
        <tr>
          <td width="150" class="title">建筑面积(m²)</td>
          <td>{{ showForm.pledgeHouseArea }}</td>
          <td width="150" class="title">房屋初评(万元)</td>
          <td>{{ showForm.pledgePreliminaryMoney }}</td>
          <td width="150" class="title">一抵抵押银行</td>
          <td>{{ showForm.pledgeOneBank }}</td>
          <td width="150" class="title">一抵抵押余额(万元)</td>
          <td>{{ showForm.pledgeOneBalance }}</td>
        </tr>
        <tr>
          <td width="150" class="title">本次申请金额(万元)</td>
          <td>{{ showForm.basicLoansMoney }}</td>
          <td width="150" class="title">本次申请期限(期)</td>
          <td>{{ showForm.basicLoansMonths }}</td>
          <td width="150" class="title">土地性质</td>
          <td>{{ showForm.landNature }}</td>
          <td width="150" class="title">产权证号</td>
          <td>{{ showForm.pledgeHouseNumber }}</td>
        </tr>
      </table>

      <table v-if="showForm.pledgeHouseAddressTwo">
        <tr>
          <td rowspan="3" width="150" class="left">不动产信息</td>
          <td width="150" class="title">抵押物地址</td>
          <td>{{ showForm.pledgeHouseAddressTwo }}</td>
          <td width="150" class="title">所属区域</td>
          <td>
            {{ showForm.provinceTwoName }}{{ showForm.cityTwoName
            }}{{ showForm.areaTwoName }}
          </td>
          <td width="150" class="title">小区名字</td>
          <td>{{ showForm.pledgeHouseNameTwo }}</td>
          <td width="150" class="title">房屋类型</td>
          <td>{{ showForm.pledgeHouseTypeTwo }}</td>
        </tr>
        <tr>
          <td width="150" class="title">建筑面积(m²)</td>
          <td>{{ showForm.pledgeHouseAreaTwo }}</td>
          <td width="150" class="title">房屋初评(万元)</td>
          <td>{{ showForm.pledgePreliminaryMoneyTwo }}</td>
          <td width="150" class="title">一抵抵押银行</td>
          <td>{{ showForm.pledgeOneBankTwo }}</td>
          <td width="150" class="title">一抵抵押余额(万元)</td>
          <td>{{ showForm.pledgeOneBalanceTwo }}</td>
        </tr>
        <tr>
          <td width="150" class="title">土地性质</td>
          <td>{{ showForm.landNatureTwo }}</td>
          <td colspan="6"></td>
        </tr>
      </table>
    </div>
    <el-dialog
      title="修改信息"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="1000px"
    >
      <Information
        ref="Information"
        width="33.3%"
        :formData="showForm"
      ></Information>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getOrderTable, updaMortForm } from "../../../src/assets/js/api";
import Information from "./Information";
import OrderInformation from "./OrderInformation";
export default {
  name: "InformationsViewer",
  components: { OrderInformation, Information },
  props: ["orderNumber"],
  data() {
    return {
      form: null,
      productId: null,
      dialogVisible: false,
      showForm: {},
      orderStatus: "",
      golbalPermissions: [],
      formOderNumber: ""
    };
  },
  created() {
    //根据订单号查询订单信息
    this.getOrderTable(this.orderNumber);
  },
  mounted() {
    this.productId = sessionStorage.getItem("productId");
  },
  computed: {
    //借款人资质！
    Borrowing: function() {
      if (this.showForm.qualification == "0") {
        return "一类";
      }
      if (this.showForm.qualification == "1") {
        return "二类";
      } else if (this.showForm.qualification == "2") {
        return "三类";
      } else {
        return "";
      }
    },
    // 是否涉诉！
    litigation: function() {
      if (this.showForm.litigation == "0") {
        return "是";
      } else if (this.showForm.litigation == "1") {
        return "否";
      } else {
        return "";
      }
    },
    // 签约类型！
    Contract: function() {
      if (this.showForm.signType == "0") {
        return "1类";
      } else if (this.showForm.signType == "1") {
        return "2类";
      } else {
        return "";
      }
    }
  },
  methods: {
    //根据订单号查询表格信息
    getOrderTable(orderId) {
      getOrderTable(orderId).then(res => {
        this.showForm = JSON.parse(JSON.stringify(res.data.form));
        this.formOderNumber = res.data.orderNumber;
        this.orderStatus = res.data.orderStatus;
      });
    },
    //打开弹窗
    showDia() {
      this.dialogVisible = true;
    },
    //
    //弹框确认按钮
    submit() {
      let thisObj = this;
      let bStop = true;
      let formData = this.$refs.Information.form;
      formData.orderNumber = this.formOderNumber;
      bStop = this.checkForm();
      //获取自定义表单
      if (bStop) {
        updaMortForm(formData).then(res => {
          if (res.code == 200) {
            thisObj.$message.success("修改成功");
            thisObj.getOrderTable(thisObj.orderNumber);
            this.dialogVisible = false;
          }
        });
      }
    },
    //验证格式
    checkForm() {
      //子组件的表格
      this.$refs.Information.validateForm();
      let isValid = this.$refs.Information.isValid;
      if (!isValid) {
        this.$message({
          message: "请完成基础信息的非空填写",
          type: "error"
        });
        return false;
      }
      return true;
    }
  }
};
</script>

<style scoped type="less">
.box {
  height: auto;
  width: 100%;
}
.el-col {
  text-align: left;
}
.el-row {
  padding: 10px 0;
}
.el-button {
  height: 30px;
  line-height: 5px;
}
.elDia ::v-deep .el-dialog {
  width: 60% !important;
  margin-top: unset !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.enterInfor table {
  width: 100%;
  margin-bottom: 10px;
  word-break: break-all;
}
.enterInfor table {
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
}
.enterInfor table td {
  padding: 5px 0;
  font-size: 14px;
  color: #333333;
  text-align: left;
  padding-left: 10px;
  border: 1px rgb(121, 121, 121) solid;
}
::v-deep .el-range-editor--small.el-input__inner {
  width: 210px;
}
.enterInfor .left {
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  padding: unset;
}
.enterInfor .title {
  background: rgba(59, 157, 248, 0.06);
}
</style>
